﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技师管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .main-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
            width: 100%;
            position: relative;
        }

        .title-wrapper {
            flex: 1;
        }

        .list-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
            padding-bottom: 0;
            display: inline-block;
        }

        .title-underline {
            height: 2px;
            background-color: #1890ff;
            width: 100%;
            position: absolute;
            bottom: -5px;
            left: 0;
        }

        .upload-btn {
            background-color: #1890ff;
            color: white;
            padding: 8px 16px;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            display: inline-block;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
            white-space: nowrap;
        }

        .upload-btn:hover {
            background-color: #40a9ff;
        }

        .search-container {
            margin: 15px 0 20px;
            width: 100%;
            display: flex;
            align-items: center;
        }

        #searchName {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 300px;
            box-sizing: border-box;
            font-size: 14px;
        }

        .search-buttons {
            display: flex;
            margin-left: 10px;
            gap: 10px;
        }

        .search-btn,
        .reset-btn {
            padding: 8px 16px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
            font-size: 14px;
        }

        .search-btn:hover,
        .reset-btn:hover {
            background-color: #40a9ff;
        }

        .technician-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
            width: 100%;
        }

        .technician-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }

        .technician-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .technician-img {
            width: 100%;
            height: 160px;
        }

        .technician-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .technician-info {
            padding: 12px;
        }

        .technician-name {
            font-size: 16px;
            margin: 0 0 8px;
            color: #333;
            font-weight: bold;
        }

        .working-hours {
            color: #666;
            font-size: 14px;
            margin-bottom: 12px;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }

        .detail-btn {
            display: block;
            padding: 8px 12px;
            background: #1890ff;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            transition: background 0.3s;
            flex: 1;
        }

        .detail-btn:hover {
            background: #40a9ff;
        }

        .pagination-container {
            margin-top: 20px;
            text-align: center;
            width: 100%;
        }

        .error-message {
            color: #f5222d;
            text-align: center;
            padding: 20px;
        }

        @media (max-width: 1200px) {
            .technician-container {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 768px) {
            .technician-container {
                grid-template-columns: repeat(3, 1fr);
            }

            .header-container {
                flex-direction: column;
            }

            .upload-btn {
                align-self: flex-end;
                margin-top: 10px;
            }

            .search-container {
                flex-direction: column;
                align-items: flex-start;
            }

            #searchName {
                width: 100%;
                margin-bottom: 10px;
            }

            .search-buttons {
                margin-left: 0;
                width: 100%;
            }

            .search-btn,
            .reset-btn {
                flex: 1;
            }
        }

        @media (max-width: 480px) {
            .technician-container {
                grid-template-columns: repeat(2, 1fr);
            }

            .list-title {
                font-size: 20px;
            }
        }
    </style>
</head>

<body>
    <div class="main-container">
        <!-- 标题和按钮行 -->
        <div class="header-container">
            <div class="title-wrapper">
                <h1 class="list-title">技师列表</h1>
                <div class="title-underline"></div>
            </div>
            <a href="add.html" class="upload-btn">上传个人信息</a>
        </div>

        <!-- 搜索框 -->
        <div class="search-container">
            <input type="text" id="searchName" placeholder="输入技师姓名">
            <div class="search-buttons">
                <button class="search-btn" onclick="loadTechnicians(1)">搜索</button>
                <button class="reset-btn" onclick="resetSearch()">重置</button>
            </div>
        </div>

        <!-- 技师列表容器 -->
        <div id="technician-list" class="technician-container"></div>

        <!-- 分页控件 -->
        <div id="pagination" class="pagination-container"></div>
    </div>

    <script>
        //生产环境接口地址http://47.108.230.236:9001
        //本地环境接口地址http://127.0.0.1:9001/
        // 配置常量
        const API_CONFIG = {
            baseUrl: 'http://47.108.230.236:9001',
            uploadBaseUrl: 'http://47.108.230.236:9001/uploads/',
            endpoint: '/api/technicians/list',
            defaultImage: 'picture/default-avatar.jpg'
        };

        // 当前分页状态
        let currentPage = 1;
        const pageSize = 12;

        // 页面加载初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadTechnicians(1);
        });

        // 重置搜索功能
        function resetSearch() {
            document.getElementById('searchName').value = '';
            loadTechnicians(1);
        }

        /**
         * 加载技师数据
         */
        async function loadTechnicians(pageNum) {
            currentPage = pageNum;
            const searchName = document.getElementById('searchName').value;

            try {
                const response = await fetch(
                    `${API_CONFIG.baseUrl}${API_CONFIG.endpoint}?pageNum=${pageNum}&pageSize=${pageSize}&name=${encodeURIComponent(searchName)}`
                );

                if (!response.ok) throw new Error(`HTTP ${response.status}`);

                const result = await response.json();
                // 处理图片URL拼接
                const processedList = result.list.map(tech => ({
                    ...tech,
                    // 前端拼接完整图片URL
                    mainImg: tech.mainImg ? `${API_CONFIG.uploadBaseUrl}${tech.mainImg}` : null,
                    listImg: tech.listImg ? `${API_CONFIG.uploadBaseUrl}${tech.listImg}` : null
                }));

                renderTechnicians(processedList);
                renderPagination(result.total);
            } catch (error) {
                console.error('加载数据失败:', error);
                document.getElementById('technician-list').innerHTML =
                    '<div class="error-message">数据加载失败，请刷新重试</div>';
            }
        }

        /**
         * 渲染技师列表
         */
        function renderTechnicians(technicians) {
            const container = document.getElementById('technician-list');
            container.innerHTML = '';

            technicians.forEach(tech => {
                const card = document.createElement('div');
                card.className = 'technician-card';
                card.innerHTML = `
                    <div class="technician-img">
                        <img src="${tech.mainImg || API_CONFIG.defaultImage}" 
                             alt="${tech.name || '技师照片'}"
                             onerror="this.src='${API_CONFIG.defaultImage}'">
                    </div>
                    <div class="technician-info">
                        <h3 class="technician-name">${tech.name || '未命名技师'}</h3>
                        <p class="working-hours">${tech.message || '未设置'}</p>
                        <div class="action-buttons">
                            <a href="detail.html?id=${tech.id}" class="detail-btn">查看详情</a>
                        </div>
                    </div>
                `;
                container.appendChild(card);
            });
        }

        /**
         * 渲染分页控件
         */
        function renderPagination(total) {
            const totalPages = Math.ceil(total / pageSize);
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            // 上一页按钮
            if (currentPage > 1) {
                const prevBtn = document.createElement('button');
                prevBtn.textContent = '上一页';
                prevBtn.onclick = () => loadTechnicians(currentPage - 1);
                pagination.appendChild(prevBtn);
            }

            // 页码按钮
            for (let i = 1; i <= totalPages; i++) {
                const pageBtn = document.createElement('button');
                pageBtn.textContent = i;
                pageBtn.style.margin = '0 5px';
                if (i === currentPage) {
                    pageBtn.style.fontWeight = 'bold';
                    pageBtn.style.color = '#1890ff';
                }
                pageBtn.onclick = () => loadTechnicians(i);
                pagination.appendChild(pageBtn);
            }

            // 下一页按钮
            if (currentPage < totalPages) {
                const nextBtn = document.createElement('button');
                nextBtn.textContent = '下一页';
                nextBtn.onclick = () => loadTechnicians(currentPage + 1);
                pagination.appendChild(nextBtn);
            }

            // 显示总数
            const totalText = document.createElement('span');
            totalText.textContent = ` 共 ${total} 条记录`;
            totalText.style.marginLeft = '10px';
            pagination.appendChild(totalText);
        }
    </script>
</body>

</html>